<template>
  <div class="container">
    <div class="header">
      <van-icon @click="goBack" name="arrow-left" class="header-left" size="30" />
            填写服务订单
    </div>
    <status-bar item="0"/>
    <van-cell class="cell">
      <template #title>
        <van-image
          width="25"
          height="25"
          :src="createInfo.service.serviceImg"
        />
        <span class="server-name">{{ createInfo.service.serviceName }}</span>
      </template>
      <template #default>
        <div class="service-text">
          服务内容
        </div>
      </template>
    </van-cell>
    <van-cell-group class="cell">
      <van-cell>
        <template #title>
          就诊医院
        </template>
        <template #default>
        <div @click="showHospital=true">
          {{ form.hospital_name || '请选择就诊医院' }}
          <van-icon name="arrow" />
        </div>
      </template>
      </van-cell>

      <van-cell>
        <template #title>
          就诊时间
        </template>
        <template #default>
        <div @click="showTime=true">
          {{ currentDate || '请选择就诊时间' }}
          <van-icon name="arrow" />
        </div>
      </template>
      </van-cell>
      <van-cell>
        <template #title>
          陪诊师选择
        </template>
        <template #default>
        <div @click="showCom=true">
          {{ ComName || '请选择陪护师' }}
          <van-icon name="arrow" />
        </div>
      </template>
      </van-cell>
      <van-cell>
        <template #title>
          接送地址
        </template>
        <template #default>
               <van-field
                  class="text"
                  input-align="right"
                  v-model="form.receiveAddress"
                  placeholder="请填写就诊人地址"
              />
      </template>
      </van-cell>
      <van-cell>
        <template #title>
          联系电话
        </template>
        <template #default>
               <van-field
                  class="text"
                  input-align="right"
                  v-model="form.tel"
                  placeholder="请填写就诊人联系电话"
              />
      </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group title="服务需求" class="cell">
      <van-field
                  class="text"
                  style="height: 100px;"
                  v-model="form.demand"
                  placeholder="请描述要就诊的科室"
              />
    </van-cell-group>
    <van-button @click="submit" type="primary" size="large" class="sumbit">
        提交订单
    </van-button>

<!-- 就诊医院弹出层 -->
    <van-popup
      v-model:show="showHospital"
      position="bottom"
      :style="{ height: '30%' }"
    >
    <van-picker
      :columns="HospColumns"
      @confirm="showHospConfirm"
      @cancel="showHospital = false"
    />
</van-popup>
<!-- 就诊时间弹出层 -->
  <van-popup
      v-model:show="showTime"
      position="bottom"
      :style="{ height: '30%' }"
    >
    <van-date-picker
      @confirm="showTimeConfirm"
      @cancel="showTime = false"
      title="选择日期"
      :min-date="minDate"
    />
  </van-popup>

  <!-- 陪诊师弹层 -->
  <van-popup
      v-model:show="showCom"
      position="bottom"
      :style="{ height: '30%' }"
    >
    <van-picker
      :columns="ComColumns"
      @confirm="showComConfirm"
      @cancel="showCom = false"
    />
  </van-popup>
 <!-- 支付弹窗 -->
  <van-dialog v-model:show="showCode" :show-confirm-button="false">
    <van-icon name="cross" class="close" @click="closeCode" style="margin-left: 10px;" />
    <div style="text-align: center">微信支付</div>
  <van-image width="150px" height="150px" :src="codeImg" style="margin-left: 80px;"/>
  <div style="text-align: center">请使用本人微信扫描二维码</div>
</van-dialog>


  </div>
</template>

<script setup>
import StatusBar from '../../components/statusBar.vue';
import { getCurrentInstance, onMounted, reactive,ref,computed} from 'vue';
import Qrcode from 'qrcode'
import {useRouter,useRoute} from 'vue-router'

//获取vue实例
const {proxy} = getCurrentInstance()
const router = useRouter()
const route = useRoute()
//获取数据
onMounted(async()=>{
  const {data} =await proxy.$api.getCompanion()
  // console.log(data,data,'创建订单数据');
  Object.assign(createInfo,data.data)
  
})
const createInfo = reactive({
  companion:[],
  hospitals:[],
  service:[]
})
//点击返回
const goBack = ()=>{
  router.go(-1)
}
//就诊医院
const showHospital = ref(false)
const HospColumns  = computed(()=>{
  return createInfo.hospitals.map(item=>{
    return {text:item.name,value:item.id}
  })
})
//form数据
const form = reactive({})
if(route.query){
  form.hospital_name =  route.query.name
  form.hospital_id = Number(route.query.id)
}
//选择医院
const showHospConfirm=(item)=>{
  console.log(item,'item');
  form.hospital_id = item.selectedOptions[0].value
  form.hospital_name = item.selectedOptions[0].text
  showHospital.value = false
}
//选择时间
const showTime = ref(false)
const currentDate = ref()

//定义最小日期
const minDate = ref(new Date())
const showTimeConfirm = (item)=>{
  const dataStr =item.selectedValues.join('-')
  currentDate.value=dataStr
  //得到时间戳
  form.starttime = new Date(dataStr).getTime()
  showTime.value=false
}

//定义陪诊师
const showCom = ref(false)
const ComName = ref()
const showComConfirm = (item)=>{
  form.companion_id = item.selectedOptions[0].value
  ComName.value = item.selectedOptions[0].text
  showCom.value = false
  
}
const ComColumns  = computed(()=>{
  return createInfo.companion.map((item)=>{
    return {text:item.name,value:item.id}
  })
})

const showCode = ref(false)
const codeImg = ref('')
const closeCode = ()=>{
    showCode.value = false
    router.push('/order')
  }
//提交表单
const submit =async ()=>{
  const params = [
    "hospital_id",
    "hospital_name",
    "demand",
    "companion_id",
    "receiveAddress",
    "tel",
    "starttime"
  ]
  for(const i of params){
    if(!form[i]){
      showNotify({ message: '请填写每一项' });
      return
    }
  }
  const {data}= await proxy.$api.createOrder(form)
  console.log(data.data);
  Qrcode.toDataURL(data.data.wx_code).then((url)=>{
    showCode.value = true
    codeImg.value = url
  })
  
}
</script>

<style lang="less">
.container {
  background-color: #f0f0f0;
  height: 100vh;

}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
	display: flex;
	align-items: center;
  }
  .server-name {
	  margin-left: 10px;
    
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}


</style>